<template>
  <s-layout title="文明积分" navbar="normal" :bgStyles="{ color: '#f5f5f5' }">
    <!-- 排行榜分类标签 -->
    <view class="ranking-tabs">
      <view
        v-for="(tab, index) in state.tabs"
        :key="index"
        :class="['ranking-tab', { active: state.activeTab === index }]"
        @tap="handleTabChange(index)"
      >
        {{ tab.name }}
      </view>
    </view>

    <!-- 前三名展示 -->
    <view class="top-three">
      <view class="top-three-content">
        <view class="top-three-title">{{ state.currentRankingTitle }}</view>
        <view class="podium">
          <!-- 第二名 -->
          <view class="podium-item second" @tap="handleViewProfile(state.topThree[1]?.id)">
            <view class="podium-avatar silver">
              <text class="avatar-emoji">{{ state.topThree[1]?.avatar || '👩' }}</text>
            </view>
            <view class="podium-rank">#2</view>
            <view class="podium-name">{{ state.topThree[1]?.name || '---' }}</view>
            <view class="podium-score">{{ state.topThree[1]?.score || '---' }}</view>
          </view>

          <!-- 第一名 -->
          <view class="podium-item first" @tap="handleViewProfile(state.topThree[0]?.id)">
            <view class="podium-avatar gold">
              <view class="podium-crown">👑</view>
              <text class="avatar-emoji">{{ state.topThree[0]?.avatar || '👨' }}</text>
            </view>
            <view class="podium-rank">#1</view>
            <view class="podium-name">{{ state.topThree[0]?.name || '---' }}</view>
            <view class="podium-score">{{ state.topThree[0]?.score || '---' }}</view>
          </view>

          <!-- 第三名 -->
          <view class="podium-item third" @tap="handleViewProfile(state.topThree[2]?.id)">
            <view class="podium-avatar bronze">
              <text class="avatar-emoji">{{ state.topThree[2]?.avatar || '👴' }}</text>
            </view>
            <view class="podium-rank">#3</view>
            <view class="podium-name">{{ state.topThree[2]?.name || '---' }}</view>
            <view class="podium-score">{{ state.topThree[2]?.score || '---' }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 我的排名 -->
    <view class="my-ranking">
      <view class="my-ranking-header">
        <text class="ranking-emoji">📊</text>
        <text class="my-ranking-title">我的排名</text>
      </view>
      <view class="my-ranking-content">
        <view class="my-ranking-info">
          <view class="my-avatar">
            <text>👤</text>
          </view>
          <view class="my-details">
            <text class="my-name">{{ state.myRanking.name }}</text>
            <text class="my-score">{{ state.myRanking.scoreText }}</text>
          </view>
        </view>
        <view class="my-rank">{{ state.myRanking.rank }}</view>
      </view>
    </view>

    <!-- 统计信息 -->
    <view class="stats-section">
      <view class="stats-title">
        <text class="stats-emoji">📈</text>
        <text>本月数据统计</text>
      </view>
      <view class="stats-grid">
        <view v-for="(stat, index) in state.stats" :key="index" class="stats-item">
          <view class="stats-number">{{ stat.number }}</view>
          <view class="stats-label">{{ stat.label }}</view>
        </view>
      </view>
    </view>

    <!-- 排行榜列表 -->
    <view class="ranking-list">
      <view class="ranking-header">
        <view class="ranking-title">{{ state.currentListTitle }}</view>
        <view class="ranking-date">更新时间：{{ state.updateTime }}</view>
      </view>

      <view
        v-for="(item, index) in state.rankingList"
        :key="item.id"
        :class="[
          'ranking-item',
          { 'is-me': item.isMe }
        ]"
        @tap="handleViewProfile(item.id)"
      >
        <view
          :class="[
            'ranking-number',
            { 'top-1': index === 0 },
            { 'top-2': index === 1 },
            { 'top-3': index === 2 }
          ]"
        >
          {{ index + 1 }}
        </view>
        <view class="ranking-avatar">
          <text>{{ item.avatar }}</text>
        </view>
        <view class="ranking-info">
          <text class="ranking-name">{{ item.name }}{{ item.isMe ? ' (我)' : '' }}</text>
          <text class="ranking-subtitle">{{ item.subtitle }}</text>
        </view>
        <view class="ranking-score">
          <text class="score-number">{{ item.scoreValue }}</text>
          <text class="score-unit">{{ item.scoreUnit }}</text>
        </view>
      </view>
    </view>

    <!-- 加载更多按钮 -->
    <view class="load-more">
      <button class="load-more-btn" @tap="handleLoadMore">查看更多排名</button>
    </view>
  </s-layout>
</template>

<script setup>
import { reactive, computed } from 'vue'
import sheep from '@/sheep'

const state = reactive({
  activeTab: 0,
  tabs: [
    { name: '积分榜', key: 'points' },
    { name: '时长榜', key: 'hours' },
    { name: '活动榜', key: 'activities' },
    { name: '月度榜', key: 'monthly' }
  ],
  updateTime: '今天 12:00',

  // 排行榜数据
  rankingData: {
    points: {
      title: '🏆 积分排行榜冠军',
      listTitle: '🏅 积分排行榜',
      topThree: [
        { id: 1, name: '王志强', score: '2,450分', avatar: '👨' },
        { id: 2, name: '李小美', score: '2,180分', avatar: '👩' },
        { id: 3, name: '刘大爷', score: '1,980分', avatar: '👴' }
      ],
      list: [
        { id: 1, name: '王志强', subtitle: '金牌志愿者 · 环保小分队队长', scoreValue: '2,450', scoreUnit: '积分', avatar: '👨', isMe: false },
        { id: 2, name: '李小美', subtitle: '金牌志愿者 · 敬老服务队', scoreValue: '2,180', scoreUnit: '积分', avatar: '👩', isMe: false },
        { id: 3, name: '刘大爷', subtitle: '银牌志愿者 · 社区巡逻队', scoreValue: '1,980', scoreUnit: '积分', avatar: '👴', isMe: false },
        { id: 4, name: '陈老师', subtitle: '银牌志愿者 · 教育宣讲团', scoreValue: '1,750', scoreUnit: '积分', avatar: '🧑', isMe: false },
        { id: 5, name: '赵阿姨', subtitle: '银牌志愿者 · 文化活动组', scoreValue: '1,580', scoreUnit: '积分', avatar: '👩', isMe: false },
        { id: 6, name: '孙医生', subtitle: '银牌志愿者 · 健康义诊队', scoreValue: '1,420', scoreUnit: '积分', avatar: '👨', isMe: false },
        { id: 7, name: '周小姐', subtitle: '铜牌志愿者 · 文明交通队', scoreValue: '1,350', scoreUnit: '积分', avatar: '👩', isMe: false },
        { id: 8, name: '张三', subtitle: '铜牌志愿者 · 社区服务队', scoreValue: '1,250', scoreUnit: '积分', avatar: '👤', isMe: true },
        { id: 9, name: '吴大哥', subtitle: '铜牌志愿者 · 维修服务队', scoreValue: '1,180', scoreUnit: '积分', avatar: '👨', isMe: false },
        { id: 10, name: '郑阿姨', subtitle: '铜牌志愿者 · 邻里互助组', scoreValue: '1,080', scoreUnit: '积分', avatar: '👩', isMe: false }
      ],
      myRanking: {
        name: '张三',
        rank: '第8名',
        scoreText: '1,250积分 · 48小时服务'
      }
    },
    hours: {
      title: '⏰ 服务时长榜冠军',
      listTitle: '⏰ 服务时长榜',
      topThree: [
        { id: 3, name: '刘大爷', score: '156小时', avatar: '👴' },
        { id: 1, name: '王志强', score: '145小时', avatar: '👨' },
        { id: 4, name: '陈老师', score: '132小时', avatar: '🧑' }
      ],
      list: [
        { id: 3, name: '刘大爷', subtitle: '银牌志愿者 · 社区巡逻队', scoreValue: '156', scoreUnit: '小时', avatar: '👴', isMe: false },
        { id: 1, name: '王志强', subtitle: '金牌志愿者 · 环保小分队队长', scoreValue: '145', scoreUnit: '小时', avatar: '👨', isMe: false },
        { id: 4, name: '陈老师', subtitle: '银牌志愿者 · 教育宣讲团', scoreValue: '132', scoreUnit: '小时', avatar: '🧑', isMe: false },
        { id: 2, name: '李小美', subtitle: '金牌志愿者 · 敬老服务队', scoreValue: '128', scoreUnit: '小时', avatar: '👩', isMe: false },
        { id: 6, name: '孙医生', subtitle: '银牌志愿者 · 健康义诊队', scoreValue: '115', scoreUnit: '小时', avatar: '👨', isMe: false },
        { id: 5, name: '赵阿姨', subtitle: '银牌志愿者 · 文化活动组', scoreValue: '98', scoreUnit: '小时', avatar: '👩', isMe: false },
        { id: 7, name: '周小姐', subtitle: '铜牌志愿者 · 文明交通队', scoreValue: '86', scoreUnit: '小时', avatar: '👩', isMe: false },
        { id: 9, name: '吴大哥', subtitle: '铜牌志愿者 · 维修服务队', scoreValue: '72', scoreUnit: '小时', avatar: '👨', isMe: false },
        { id: 10, name: '郑阿姨', subtitle: '铜牌志愿者 · 邻里互助组', scoreValue: '58', scoreUnit: '小时', avatar: '👩', isMe: false },
        { id: 8, name: '张三', subtitle: '铜牌志愿者 · 社区服务队', scoreValue: '48', scoreUnit: '小时', avatar: '👤', isMe: true }
      ],
      myRanking: {
        name: '张三',
        rank: '第12名',
        scoreText: '48小时 · 1,250积分'
      }
    },
    activities: {
      title: '📅 活动参与榜冠军',
      listTitle: '📅 活动参与榜',
      topThree: [
        { id: 2, name: '李小美', score: '45次', avatar: '👩' },
        { id: 1, name: '王志强', score: '42次', avatar: '👨' },
        { id: 5, name: '赵阿姨', score: '38次', avatar: '👩' }
      ],
      list: [
        { id: 2, name: '李小美', subtitle: '金牌志愿者 · 敬老服务队', scoreValue: '45', scoreUnit: '次', avatar: '👩', isMe: false },
        { id: 1, name: '王志强', subtitle: '金牌志愿者 · 环保小分队队长', scoreValue: '42', scoreUnit: '次', avatar: '👨', isMe: false },
        { id: 5, name: '赵阿姨', subtitle: '银牌志愿者 · 文化活动组', scoreValue: '38', scoreUnit: '次', avatar: '👩', isMe: false },
        { id: 4, name: '陈老师', subtitle: '银牌志愿者 · 教育宣讲团', scoreValue: '35', scoreUnit: '次', avatar: '🧑', isMe: false },
        { id: 3, name: '刘大爷', subtitle: '银牌志愿者 · 社区巡逻队', scoreValue: '32', scoreUnit: '次', avatar: '👴', isMe: false },
        { id: 7, name: '周小姐', subtitle: '铜牌志愿者 · 文明交通队', scoreValue: '28', scoreUnit: '次', avatar: '👩', isMe: false },
        { id: 6, name: '孙医生', subtitle: '银牌志愿者 · 健康义诊队', scoreValue: '25', scoreUnit: '次', avatar: '👨', isMe: false },
        { id: 9, name: '吴大哥', subtitle: '铜牌志愿者 · 维修服务队', scoreValue: '22', scoreUnit: '次', avatar: '👨', isMe: false },
        { id: 10, name: '郑阿姨', subtitle: '铜牌志愿者 · 邻里互助组', scoreValue: '18', scoreUnit: '次', avatar: '👩', isMe: false },
        { id: 8, name: '张三', subtitle: '铜牌志愿者 · 社区服务队', scoreValue: '15', scoreUnit: '次', avatar: '👤', isMe: true }
      ],
      myRanking: {
        name: '张三',
        rank: '第15名',
        scoreText: '15次活动 · 48小时服务'
      }
    },
    monthly: {
      title: '🗓️ 本月排行榜冠军',
      listTitle: '🗓️ 本月排行榜',
      topThree: [
        { id: 6, name: '孙医生', score: '280分', avatar: '👨' },
        { id: 7, name: '周小姐', score: '260分', avatar: '👩' },
        { id: 9, name: '吴大哥', score: '245分', avatar: '👨' }
      ],
      list: [
        { id: 6, name: '孙医生', subtitle: '银牌志愿者 · 健康义诊队', scoreValue: '280', scoreUnit: '积分', avatar: '👨', isMe: false },
        { id: 7, name: '周小姐', subtitle: '铜牌志愿者 · 文明交通队', scoreValue: '260', scoreUnit: '积分', avatar: '👩', isMe: false },
        { id: 9, name: '吴大哥', subtitle: '铜牌志愿者 · 维修服务队', scoreValue: '245', scoreUnit: '积分', avatar: '👨', isMe: false },
        { id: 2, name: '李小美', subtitle: '金牌志愿者 · 敬老服务队', scoreValue: '220', scoreUnit: '积分', avatar: '👩', isMe: false },
        { id: 4, name: '陈老师', subtitle: '银牌志愿者 · 教育宣讲团', scoreValue: '205', scoreUnit: '积分', avatar: '🧑', isMe: false },
        { id: 8, name: '张三', subtitle: '铜牌志愿者 · 社区服务队', scoreValue: '180', scoreUnit: '积分', avatar: '👤', isMe: true },
        { id: 1, name: '王志强', subtitle: '金牌志愿者 · 环保小分队队长', scoreValue: '165', scoreUnit: '积分', avatar: '👨', isMe: false },
        { id: 5, name: '赵阿姨', subtitle: '银牌志愿者 · 文化活动组', scoreValue: '150', scoreUnit: '积分', avatar: '👩', isMe: false },
        { id: 3, name: '刘大爷', subtitle: '银牌志愿者 · 社区巡逻队', scoreValue: '135', scoreUnit: '积分', avatar: '👴', isMe: false },
        { id: 10, name: '郑阿姨', subtitle: '铜牌志愿者 · 邻里互助组', scoreValue: '120', scoreUnit: '积分', avatar: '👩', isMe: false }
      ],
      myRanking: {
        name: '张三',
        rank: '第6名',
        scoreText: '180积分 · 本月12小时'
      }
    }
  },

  // 统计数据
  stats: [
    { number: '1,567', label: '活跃志愿者' },
    { number: '8,240h', label: '累计服务时长' },
    { number: '236', label: '开展活动数' },
    { number: '12,580', label: '服务受益人次' }
  ]
})

// 计算属性：当前选中的排行榜数据
const currentRankingData = computed(() => {
  const tabKey = state.tabs[state.activeTab].key
  return state.rankingData[tabKey]
})

// 计算属性：前三名
const topThree = computed(() => currentRankingData.value.topThree)
state.topThree = topThree

// 计算属性：排行榜列表
const rankingList = computed(() => currentRankingData.value.list)
state.rankingList = rankingList

// 计算属性：我的排名信息
const myRanking = computed(() => currentRankingData.value.myRanking)
state.myRanking = myRanking

// 计算属性：当前排行榜标题
const currentRankingTitle = computed(() => currentRankingData.value.title)
state.currentRankingTitle = currentRankingTitle

// 计算属性：当前列表标题
const currentListTitle = computed(() => currentRankingData.value.listTitle)
state.currentListTitle = currentListTitle

// 切换排行榜标签
const handleTabChange = (index) => {
  state.activeTab = index
}

// 查看用户详情
const handleViewProfile = (userId) => {
  if (!userId) return

  uni.showModal({
    title: '查看用户详情',
    content: `用户ID: ${userId}\n\n功能开发中...\n将显示：\n• 个人信息\n• 志愿历程\n• 获得成就\n• 服务记录`,
    showCancel: false
  })
}

// 加载更多排名
const handleLoadMore = () => {
  uni.showModal({
    title: '加载更多排名',
    content: '将显示第11-50名志愿者排名\n功能开发中...',
    showCancel: false
  })
}
</script>

<style lang="scss" scoped>
/* 排行榜分类标签 */
.ranking-tabs {
  background: white;
  margin: 30rpx;
  border-radius: 32rpx;
  padding: 10rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
  display: flex;
  gap: 10rpx;
}

.ranking-tab {
  flex: 1;
  text-align: center;
  padding: 20rpx;
  border-radius: 24rpx;
  font-size: 26rpx;
  color: #666;
  transition: all 0.3s;
}

.ranking-tab.active {
  background: linear-gradient(135deg, #ff6b00, #ffa726);
  color: white;
  font-weight: bold;
}

/* 前三名展示 */
.top-three {
  background: linear-gradient(135deg, #ffd54f 0%, #ffecb3 100%);
  margin: 0 30rpx 30rpx;
  border-radius: 32rpx;
  padding: 40rpx;
  color: #ff6b00;
  position: relative;
  overflow: hidden;
}

.top-three::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  transform: rotate(45deg);
  pointer-events: none;
}

.top-three-content {
  position: relative;
  z-index: 2;
}

.top-three-title {
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 40rpx;
}

.podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 30rpx;
}

.podium-item {
  text-align: center;
  transition: all 0.3s;
}

.podium-item.second {
  order: 1;
}

.podium-item.first {
  order: 2;
}

.podium-item.third {
  order: 3;
}

.podium-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin: 0 auto 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48rpx;
  position: relative;
  border: 6rpx solid rgba(255, 255, 255, 0.3);
}

.podium-item.first .podium-avatar {
  width: 140rpx;
  height: 140rpx;
  font-size: 56rpx;
  border-color: #ffd700;
  box-shadow: 0 0 40rpx rgba(255, 215, 0, 0.5);
}

.podium-avatar.gold {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
}

.podium-avatar.silver {
  background: linear-gradient(135deg, #c0c0c0, #a8a8a8);
}

.podium-avatar.bronze {
  background: linear-gradient(135deg, #cd7f32, #b8860b);
}

.podium-crown {
  position: absolute;
  top: -20rpx;
  left: 50%;
  transform: translateX(-50%);
  font-size: 40rpx;
}

.avatar-emoji {
  font-size: inherit;
}

.podium-rank {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.podium-name {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 6rpx;
}

.podium-score {
  font-size: 24rpx;
  opacity: 0.9;
}

/* 我的排名 */
.my-ranking {
  background: white;
  margin: 0 30rpx 30rpx;
  border-radius: 32rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
  border-left: 8rpx solid #ff6b00;
}

.my-ranking-header {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 20rpx;
}

.ranking-emoji {
  font-size: 32rpx;
}

.my-ranking-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #ff6b00;
}

.my-ranking-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.my-ranking-info {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.my-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b00, #ffa726);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32rpx;
}

.my-details {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.my-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.my-score {
  font-size: 24rpx;
  color: #666;
}

.my-rank {
  background: linear-gradient(135deg, #ff6b00, #ffa726);
  color: white;
  padding: 16rpx 30rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  font-weight: bold;
}

/* 统计信息 */
.stats-section {
  background: white;
  margin: 0 30rpx 30rpx;
  border-radius: 32rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
}

.stats-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.stats-emoji {
  font-size: 36rpx;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;
}

.stats-item {
  text-align: center;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 24rpx;
}

.stats-number {
  font-size: 40rpx;
  font-weight: bold;
  color: #ff6b00;
  margin-bottom: 10rpx;
}

.stats-label {
  font-size: 24rpx;
  color: #666;
}

/* 排行榜列表 */
.ranking-list {
  background: white;
  margin: 0 30rpx 30rpx;
  border-radius: 32rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.ranking-header {
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #f0f2f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ranking-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.ranking-date {
  font-size: 24rpx;
  color: #999;
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: 30rpx;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #f0f2f5;
  transition: all 0.3s;
}

.ranking-item:last-child {
  border-bottom: none;
}

.ranking-item.is-me {
  background: #f0f8ff;
  border: 4rpx solid #667eea;
  margin: 0 10rpx;
  border-radius: 16rpx;
}

.ranking-number {
  width: 60rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.ranking-number.top-1 {
  color: #ffd700;
}

.ranking-number.top-2 {
  color: #c0c0c0;
}

.ranking-number.top-3 {
  color: #cd7f32;
}

.ranking-avatar {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b00, #ffa726);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 36rpx;
  flex-shrink: 0;
}

.ranking-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.ranking-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.ranking-subtitle {
  font-size: 24rpx;
  color: #999;
}

.ranking-score {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.score-number {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff6b00;
}

.score-unit {
  font-size: 22rpx;
  color: #999;
}

/* 加载更多 */
.load-more {
  text-align: center;
  padding: 40rpx;
}

.load-more-btn {
  display: inline-block;
  background: linear-gradient(135deg, #ff6b00, #ffa726);
  color: white;
  border: none;
  padding: 20rpx 50rpx;
  border-radius: 40rpx;
  font-size: 26rpx;
  line-height: 1;
  box-shadow: 0 8rpx 24rpx rgba(255, 107, 0, 0.3);
  transition: all 0.3s;
}

.load-more-btn::after {
  border: none;
}
</style>
